<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
      name: "Scroll",
      data(){
        return{
          scroll:null
        }
      },
      props:{
        probeType:{
          type:Number,
          default:0
        },
        pullUpLoad:{
          type: Boolean,
          default:false
        }
      },
      mounted() {
        //1.创建bs对象
        this.scroll = new BScroll(this.$refs.wrapper,{
          click: true,
          observeDOM:true,
          mouseWheel: true,
          probeType: this.probeType,
          pullUpLoad: this.pullUpLoad,
          // keepAlive:true,
        })
        // 2.实时监听滚动位置
        if(this.probeType == 2 || this.probeType ==3){
          this.scroll.on('scroll',(position)=>{
            // console.log(position);
            this.$emit('scroll',position)
          })
        }

        // 3.监听scroll滚动到底部
        if(this.pullUpLoad){
          this.scroll.on('pullingUp',()=>{
            this.$emit('pullingUp')
          })
        }

        this.scroll.refresh()
      },
      methods:{
        scrollTo(x,y,time=500){
          this.scroll && this.scroll.scrollTo(x,y,time)
        },
        finishPullUp(){
          this.scroll.finishPullUp()
        },
        refresh(){
         this.scroll && this.scroll.refresh()
        },
        getScrollY(){
          return this.scroll ? this.scroll.y : 0
        },
      },
    }
</script>

<style scoped>


</style>
